<template>
    <div class="echart" id="heating" :style="{ float: 'left', width: '100%', height: '400px' }"></div>
</template>
  
<script>
import * as echarts from "echarts";

export default {
    name: "Heating",
    data() {
        return {

        };
    },
    props: {
        xAxisData: {
            type: Array,
            default: []
        },
        seriesData: {
            type: Array,
            default: []
        },
    },
    watch: {

    },
    mounted() {
        this.initEcharts();
    },
    created() {


    },
    methods: {

        initEcharts() {

            var chartDom = document.getElementById('heating');
            var myChart = echarts.init(chartDom);
            var option;

            // prettier-ignore
            const hours = [

            ];
            // prettier-ignore
            const days = [

            ];
            let data = [];
            // prettier-ignore
            for (let i = 0; i < this.seriesData.length; i++) {
                const a = [0,i,this.seriesData[i]]
            }
            data  = data.map(function (item) {
                        return [item[1], item[0], item[2] || '-'];
                    });
           

            console.log("data");
            console.log(data);
            option = {
                tooltip: {
                    position: 'top'
                },
                grid: {
                    height: '50%',
                    top: '10%'
                },
                xAxis: {
                    type: 'category',
                    data: hours,
                    splitArea: {
                        show: true
                    }
                },
                yAxis: {
                    type: 'category',
                    data: days,
                    splitArea: {
                        show: true
                    }
                },
                visualMap: {
                    min: 0,
                    max: 10,
                    calculable: true,

                    orient: 'horizontal',
                    left: 'center',
                    bottom: '50%',
                    inRange: { // 指定颜色范围
                        color: [
                            '#0B5184', '#0B5386', '#0C5587', '#0C5788',
                            '#0D598A', '#0E5B8C', '#0E5D8D', '#0F5F8F',
                            '#0F6190', '#106291', '#116593', '#116694',
                            '#116895', '#126A96', '#136C99', '#146E9A',
                            '#14709B', '#15729D', '#16749E', '#15759F',
                            '#1677A0', '#1679A2', '#187BA4', '#187DA5',
                            '#1A81A8', '#1C86AA', '#1E8AAD', '#208EAF',
                            '#2394B2', '#2699B5', '#289EB8', '#2BA3BA',
                            '#2EA8BE', '#30ADC0', '#32B1C2', '#34B6C5',
                            '#37BBC8', '#39BFCB', '#3BC4CD', '#3ECAD0',
                            '#40CED2', '#43D3D6', '#45D7D8', '#48DDDB',
                            '#4BE2DE', '#4DE6E0', '#4FEBE3', '#52F0E6',
                        ]
                    }
                },
                series: [
                    {
                        name: 'Punch Card',
                        type: 'heatmap',
                        data: data,
                        label: {
                            show: false//字体显示开关
                        },
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ],


            };

            option && myChart.setOption(option);


        }
    }
};
</script>
  